<template>
	<div>
		<naviHeader></naviHeader>

		<div class="userInfo-container">
			<div class="item">
				<div>昵称</div>
				<div>{{username}}</div>
			</div>
			<div class="item">
				<div>手机号</div>
				<div>{{phone}}</div>
			</div>
			<div class="item" v-on:click="changeSex">
				<div>性别</div>
				<div>{{sex}}</div>
			</div>
			<div class="item">
				<div>地区</div>
				<div>{{address}}</div>
			</div>
			<div class="item">
				<div>邀请人</div>
				<div>{{inviter}}</div>
			</div>
		</div>

		<sheet :actions="actions" :sheetVisible="sheetVisible" v-on:hide-sheet="sheetVisible = false" v-on:chooseSex="chooseSex"></sheet>
		<model :description="description" :modelVisible="modelVisible" v-on:hide-model="modelVisible = false" v-on:confirm-btn="confirm-btn"></model>

	</div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import sheet from "src/components/sheet/sheet";
import model from "src/components/model/model";

export default {
  data() {
    return {
      username: "张三",
      phone: "张三",
      sex: "男",
      address: "张三",
			inviter: "张三",
			
      sheetVisible: false,	// actionsheet
      actions: [
        {
          name: "男",
          method: "chooseSex"
        },
        {
          name: "女",
          method: "chooseSex"
        }
			],
			
      modelVisible: false,	// model
      title: '',
			description: '',
    };
  },
  components: {
    naviHeader,
		sheet,
		model
  },
  methods: {
    // onValuesChange(picker, values) {
    //   this.sex = values[0];
    //   // if (values[0] > values[1]) {
    //   //   picker.setSlotValue(1, values[0]);
    //   // }
    // },

    changeSex() {
      this.sheetVisible = true;
    },
    chooseSex(index) {
			console.log('index: ', index);
			var name = this.actions[index].name;
			this.modelVisible = true;
			this.description = '确认修改为' + name + '吗?';

			// if () {

			// }
    	this.sex = this.actions[index].name;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.userInfo-container {
  background: #fff;

  .item {
    @include fj(space-between);
    @include sc(0.38rem, #888);
    height: 1.4rem;
    line-height: 1.4rem;
    border-top: 2px solid #f1f1f1;
    padding: 0 0.2rem;
  }
}
</style>
